﻿<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="FBKPI._Default" %>

<%--<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>--%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
    var oTable;
    var oFC;
    $(document).ready(function () {
        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $("#movement").hide();

        $("#EmployeeTable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
            },
            "bSort": false,
            "bPaginate": false,
            "bAutoWidth": false,
            "bDestroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "bJQueryUI": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/EmployeeBySuperiorIDSerializer.ashx?User=" + $("#txt_user").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [{
                "mData": "No"
            }, {
                "mData": "EmployeeName"
            }, {
                "mData": "SubBranch"
            }, {
                "mData": "Department"
            }, {
                "mData": "Section"
            }, {
                "mData": "SubSection"
            }, {
                "mData": "JobPosition"
            }, {
                "mData": "JobTitle"
            }, {
                "mData": "isActive"
            }, {
                "mData": "ID"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [8]
            }, {
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"DrawKPITable('" + oObj.aData["ID"] + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [9]
            }, {
                "sClass": "center",
                "aTargets": [0, 8, 9]
            }]
        });

        oTable = $("#dashboardtable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display"
            },
            //"sScrollY": "100%",
            "sScrollX": "100%",
		    "sScrollXInner": "150%",
		    "bScrollCollapse": false,
            "bSort": false,
            "bDestroy": true,
            "bPaginate": false,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bJQueryUI": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/DashboardSerializer.ashx?User=" + $("#txt_user").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [{
                "mData": "No"
            }, {
                "mData": "Description"
            }, {
                "mData": "Weight"
            }, {
                "mData": "Format"
            }, {
                "mData": "Jan"
            }, {
                "mData": "Feb"
            }, {
                "mData": "Mar"
            }, {
                "mData": "Apr"
            }, {
                "mData": "May"
            }, {
                "mData": "Jun"
            }, {
                "mData": "Jul"
            }, {
                "mData": "Aug"
            }, {
                "mData": "Sep"
            }, {
                "mData": "Oct"
            }, {
                "mData": "Nov"
            }, {
                "mData": "Dec"
            }, {
                "mData": "Total"
            }, {
                "mData": "ScoreAchieved"
            }, {
                "mData": "KPIAssignID",
                "bVisible":false,
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + oObj.aData["Description"] + "</a>";
                },
                "aTargets": [1]
            }, {
                "sClass": "center",
                "aTargets": [0,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
            }]
        });

                //mark selected row
        $('body').on("click", '#dashboardtable tbody tr', function () {
            $('#dashboardtable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------

        GetName($("#txt_user").val());

        DrawKPITable = function(EmployeeID)
        {
            oTable = $("#dashboardtable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display"
                },
                //"sScrollY": "100%",
                "sScrollX": "100%",
		        "sScrollXInner": "150%",
		        "bScrollCollapse": false,
                "bSort": false,
                "bDestroy": true,
                "bPaginate": false,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/DashboardSerializer.ashx?User=" + EmployeeID,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "No"
                }, {
                    "mData": "Description"
                }, {
                    "mData": "Weight"
                }, {
                    "mData": "Format"
                }, {
                    "mData": "Jan"
                }, {
                    "mData": "Feb"
                }, {
                    "mData": "Mar"
                }, {
                    "mData": "Apr"
                }, {
                    "mData": "May"
                }, {
                    "mData": "Jun"
                }, {
                    "mData": "Jul"
                }, {
                    "mData": "Aug"
                }, {
                    "mData": "Sep"
                }, {
                    "mData": "Oct"
                }, {
                    "mData": "Nov"
                }, {
                    "mData": "Dec"
                }, {
                    "mData": "Total"
                }, {
                    "mData": "ScoreAchieved"
                }, {
                    "mData": "KPIAssignID",
                    "bVisible":false,
                }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "','" + EmployeeID + "')\">" + oObj.aData["Description"] + "</a>";
                    },
                    "aTargets": [1]
                }, {
                    "sClass": "center",
                    "aTargets": [0,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
                }]
            });
        
            //mark selected row
            $('body').on("click", '#dashboardtable tbody tr', function () {
                $('#dashboardtable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------

            GetName(EmployeeID);
        }
    });


    function GraphicRender(KPIAssignID, Title, EmployeeID) {
        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": "../Serializer/DashboardRealizationSerializer.ashx?User=" + EmployeeID + "&KPIAssign=" + KPIAssignID,
            "success": function (data) {
                $("#movement").show();

                $("#chartdiv").html('');

                var lineScore = ArrGraphSeries(data, 'Score');
                var lineMax = ArrGraphSeries(data, 'Max');
                var lineMin = ArrGraphSeries(data, 'Min');

                var plot1 = $.jqplot('chartdiv', [lineScore, lineMax, lineMin], {
                    title: Title,
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.DateAxisRenderer,
                            tickOptions: {
                                formatString: '%b'
                            }
                        },
                        yaxis: {
                            tickOptions: {
                                formatString: '%.2f'
                            },
                            min: 0,
                            max: (200)
                        }
                    },
                    legend: {
                        show: true
                    },
                    series: [{
                        label: 'Score'
                    }, {
                        label: 'Max'
                    }, {
                        label: 'Min'
                    }],
                    highlighter: {
                        show: true,
                        sizeAdjust: 10
                    },
                    cursor: {
                        show: false
                    }
                });
            },
            "error": function(){
                $("#movement").hide();
                return false;
            }
        });
    }

    function ArrGraphSeries(data, mode) {
        var retVal = [];

        if (mode == 'Score') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Score.toString()];
                retVal.push(x);
            }
        } else if (mode == 'Max') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Max.toString()];
                retVal.push(x);
            }
        } else if (mode == 'Min') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Min.toString()];
                retVal.push(x);
            }
        }

        return retVal;
    }

    GetName = function (EmployeeID) {
        $.ajax({
            "url": "../Serializer/DashboardSerializer.ashx?User=" + EmployeeID,
            success: function (data) {
                $("#lbl_employeename").text(': ' + data.EmployeeName);
            }
        });
    }
    </script>
    <style>
        .fg-toolbar
        {
            display: none;
        }
    </style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <form id="dashboard">
  <%--  <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>--%>
  <%--  <asp:Accordion ID="Accordion1" runat="server">
        <Panes>
            <asp:AccordionPane ID="AccordionPane1" runat="server">
                <Header>
                    Pane 1</Header>
                <Content>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
                    massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
                    sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
                    a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                    ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                </Content>
            </asp:AccordionPane>
            <asp:AccordionPane ID="AccordionPane2" runat="server">
                <Header>
                    Pane 2</Header>
                <Content>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
                    massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
                    sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
                    a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                    ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                </Content>
            </asp:AccordionPane>
            <asp:AccordionPane ID="AccordionPane3" runat="server">
                <Header>
                    Pane 3</Header>
                <Content>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
                    massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
                    sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
                    a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                    ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                </Content>
            </asp:AccordionPane>
        </Panes>
    </asp:Accordion>--%>
    <div style="width: 100%">
        <div class="customPageTitle">
            Employee List</div>
        <br />
        <div class="customePageContent">
            <div style="border: 1px solid Black;">
                <table cellpadding="0 !important" cellspacing="0 !important" class="display" id="EmployeeTable">
                    <thead>
                        <tr>
                            <th>
                                No
                            </th>
                            <th>
                                Employee Name
                            </th>
                            <th>
                                Sub Branch
                            </th>
                            <th>
                                Department
                            </th>
                            <th>
                                Section
                            </th>
                            <th>
                                Sub Section
                            </th>
                            <th>
                                Job Position
                            </th>
                            <th>
                                Job Title
                            </th>
                            <th>
                                is Active
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <br />
        <div class="customPageTitle">
            Current KPI Status&nbsp;<label id="lbl_employeename"></label></div>
        <br />
        <div class="customePageContent">
            <div style="border: 1px solid Black;">
                <table cellpadding="0 !important" cellspacing="0 !important" class="display" id="dashboardtable">
                    <thead>
                        <tr>
                            <th>
                                No
                            </th>
                            <th>
                                KPI
                            </th>
                            <th>
                                Weight
                            </th>
                            <th>
                                Format
                            </th>
                            <th>
                                Jan
                            </th>
                            <th>
                                Feb
                            </th>
                            <th>
                                Mar
                            </th>
                            <th>
                                Apr
                            </th>
                            <th>
                                May
                            </th>
                            <th>
                                Jun
                            </th>
                            <th>
                                Jul
                            </th>
                            <th>
                                Aug
                            </th>
                            <th>
                                Sep
                            </th>
                            <th>
                                Oct
                            </th>
                            <th>
                                Nov
                            </th>
                            <th>
                                Dec
                            </th>
                            <th>
                                Total
                            </th>
                            <th>
                                Score
                            </th>
                            <th>
                                KPIAssignID
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <br />
        <div id="movement">
            <div class="customPageTitle">
                Current KPI Score Movement</div>
            <br />
            <div id="chartdiv" style="height: 400px; width: 1000px;">
            </div>
        </div>
    </div>
    </form>
</asp:Content>
